<!DOCTYPE html>
<html lang="en">
<head>
<!--    zpl-->
    <meta charset="UTF-8">
    <title>商品管理</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true"  class="demo-form-inline" style="display: flex;align-items: center">
                <el-form-item label="型号" style="margin-left: 10px">
                    <el-input v-model="product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="type" filterable placeholder="请选择">
                        <el-option
                                v-for="item in optionsType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-select v-model="price" placeholder="请选择">
                        <el-option
                                v-for="item in optionsPrice"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click.prevent="query(1)">查询</el-button>
                    <el-button  type="primary" @click.prevent="create">添加</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="tableData.data" style="width: 100%">
                    <el-table-column prop="product" label="型号"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>
                    <el-table-column prop="count" label="数量"></el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="modify(scope.row)" type="text" size="small">编辑</el-button>
                            <el-popconfirm title="请问是否经逻辑删除, 否则使用物理删除?"
                                           confirm-button-text='逻辑删除'
                                           cancel-button-text='物理删除'
                                           icon="el-icon-info"
                                           icon-color="red"
                                           @confirm="remove(scope.row,'逻辑删除')"
                                           @cancel="remove(scope.row,'物理删除')">
                                <el-button slot="reference" type="text" size="small">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination :current-page="currentPage" :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                    style="text-align: center"
                    background :page-sizes="[5, 10, 20, 50]"
                    layout="sizes, prev, pager, next"
                    :total="tableData.total">
            </el-pagination>
        </el-footer>
    </el-container>
    <el-dialog title="商品编辑" :visible.sync="dialogVisible">
        <div style="display: flex; justify-content: space-around">
            <el-form>
                <el-form-item label="型号" :label-width="formLabelWidth">
                    <el-input v-model="editPhone.product" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth">
                    <el-select v-model="editPhone.type" filterable placeholder="请选择">
                        <el-option
                                v-for="item in optionsType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="editPhone.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="颜色" :label-width="formLabelWidth">
                    <el-input v-model="editPhone.color" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="editPhone.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="简介" :label-width="formLabelWidth">
                    <el-input type="textarea" autosize v-model="editPhone.intro" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-upload name="image"
                       class="avatar-uploader"
                       action="../UploadImageServlet.s"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
                <img v-if="editPhone.image" :src="'../' + editPhone.image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
        <span slot="footer" class="dialog-footer">
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePhone">确 定</el-button>
        </div>
        </span>
    </el-dialog>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            optionsType: [
                {value: "手机", label : "手机"},
                {value: "平板", label : "平板"},
                {value: "手表", label : "手表"},
                {value: "电脑", label : "电脑"},
                {value: "耳机配件", label : "耳机配件"}

            ],
            type: "",
            optionsPrice:[
                {value: "100~999", label: "100~999"},
                {value: "1000~1999", label: "1000~1999"},
                {value: "2000~2999", label: "2000~2999"},
                {value: "3000~3999", label: "3000~3999"},
                {value: "4000~6999", label: "4000~6999"},
                {value: "7000~9999", label: "7000~9999"},
                {value: "10000~20000", label: "10000~20000"},
            ],
            price : "",
            product : "",
            tableData : {},
            currentPage : 1,
            pageSize : 5,
            dialogVisible : false,
            editPhone : {product : "", type : "", price : "", count : 0, intro : "", image : "", color : ""},
            formLabelWidth : '100px',
            product1: ""
        },
        created(){
            this.query(1);
        },
        methods :{
            sizeChange(size){

            },
            query(page){

            },
            savePhone(){

            },
            handleAvatarSuccess(res, file) {
                this.editPhone.image = res.data;
                this.$forceUpdate();
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') > -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 图片 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            create(){
                this.editPhone = {product : "", type : "", price : "", count : 0, intro : "", image : "", color : ""};
                this.dialogVisible = true;
            },
            modify(phone){
                // 复制 book 的属性 => editBook
                for (let name in phone){
                    this.editPhone[name] = phone[name];
                }
                console.log(phone);
                console.log(this.editPhone)
                this.dialogVisible = true;//打开弹窗
            },
            remove(phone, flag){

            }
        }


    })
</script>
</body>
<style>
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container{
        height: 100%;
    }
    .el-main {
        height: 100%;
    }
</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</html>